<template>
  <div class="addcaregiver">
    <Navbar :title="'新增陪护证'"></Navbar>
    <div class="step">
      <!-- 生成步骤图 -->
      <div
        class="step-item"
        @click="changeFlag(1)"
        :style="flag == 1 ? 'color: rgb(8, 75, 255);' : ''"
      >
        <img src="@/assets/tabs/first.png" alt="" />
        <h4>患者信息</h4>
      </div>
      ------
      <div
        class="step-item"
        @click="changeFlag(2)"
        :style="flag == 2 ? 'color: rgb(8, 75, 255);' : ''"
      >
        <img src="@/assets/tabs/second.png" alt="" />
        <h4>陪护人信息</h4>
      </div>
      ------
      <div
        class="step-item"
        @click="changeFlag(3)"
        :style="flag == 3 ? 'color: rgb(8, 75, 255);' : ''"
      >
        <img src="@/assets/tabs/three.png" alt="" />
        <h4>提交结果</h4>
      </div>
    </div>
    <div class="content" v-show="flag == 1">
      <h4 style="text-align: start; margin-left: 30px; line-height: 50px">
        请完善一下基本信息
      </h4>
      <div class="form">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field
              v-model="adNumber"
              name="adNumber"
              label="住院号"
              placeholder="请输入住院号"
              :rules="[{ required: true, message: '请填写住院号' }]"
            />
            <van-field
              v-model="username"
              name="username"
              label="患者名称"
              placeholder="请输入姓名"
              :rules="[{ required: true, message: '请填写姓名' }]"
            />
            <van-field
              v-model="curAddress"
              name="curAddress"
              label="住院病区"
              placeholder="请输入住院病区"
              :rules="[{ required: true, message: '请填写住院病区' }]"
            />
            <van-field
              v-model="bed"
              name="bed"
              label="住院床号"
              placeholder="请输入住院床号"
              :rules="[{ required: true, message: '请填写住院床号' }]"
            />
          </van-cell-group>
          <div class="prompt">
            <span>温馨提示</span>
            <p>1、请确保该住院患者已存在，否则将审核失败。</p>
            <p>2、申请前需准备好身份证证件及个人头像。</p>
          </div>

          <div style="margin: 16px">
            <van-button block type="primary"> 下一步 </van-button>
          </div>
        </van-form>
      </div>
    </div>
    <div class="content" v-show="flag == 2">
      <h4 style="text-align: start; margin-left: 30px; line-height: 50px">
        请完善一下陪护人基本信息
      </h4>
      <div class="form">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field
              v-model="name"
              name="name"
              label="陪护人姓名"
              placeholder="请输入姓名"
              :rules="[{ required: true, message: '请填写姓名' }]"
            />
            <van-field name="radio" label="性别">
              <template #input>
                <van-radio-group v-model="checked" direction="horizontal">
                  <van-radio :name="1">男</van-radio>
                  <van-radio :name="0">女</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field
              v-model="contactPhone"
              name="contactPhone"
              label="联系人电话"
              placeholder="请输入联系人电话"
              :rules="[
                { validator: validator2, message: '请输入正确的电话号码' },
              ]"
            />
            <van-field
              label="身份证号"
              v-model="id"
              name="id"
              placeholder="请输入身份证号"
              :rules="[{ validator, message: '身份证号不正确' }]"
            />
          </van-cell-group>

          <div style="margin: 16px">
            <van-button block type="primary" @click="addCaregiver">
              提交申请
            </van-button>
          </div>
        </van-form>
      </div>
    </div>
    <div v-show="flag == 3" class="content1">
      <div
        class="submit"
        style="
          width: 100%;
          margin: 0 auto;
          background-color: rgb(218, 255, 253);
        "
      >
        <div style="text-align: center; padding: 30px 30px 0px 30px">
          <img src="@/assets/tabs/yes.png" alt="" />
          <p>陪护申请已提交</p>
        </div>
        <div style="text-align: center; padding: 30px">
          您的陪护申请已提交，请耐心等待审核结果，审核通过后将短信通知您，请注意查收
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Navbar from "./component/Navbar.vue";
import axios from "axios";

const flag = ref(1);
const adNumber = ref("");
const username = ref("");
const curAddress = ref("");
const bed = ref("");
//陪护人基本信息
const checked = ref(1);
const contactPhone = ref(""); //陪护人电话
const name = ref(""); //陪护人姓名
const id = ref(""); //陪护人身份证号
const changeFlag = (type: number) => {
  if (type === 1) {
    flag.value = 1;
  } else if (type == 2) {
    flag.value = 2;
  } else {
    flag.value = 3;
  }
};

const onSubmit = (values: any) => {
  console.log("submit", values);
};

//电话号码验证
const validator2 = (val: any) =>
  /^1(3[0-9]|4[5-9]|5[0-35-9]|66|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(val);
//身份证验证
const validator = (val: any) =>
  /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
    val
  );

const addCaregiver = async () => {
  let obj={
    adNumber: adNumber.value,
    username: username.value,
    curAddress: curAddress.value,
    bed: bed.value,
    checked: checked.value,
    contactPhone: contactPhone.value,
    name: name.value,
    id: id.value,
  }
  let {data:{data}}=await axios.post('http://localhost:3000/zhc/addCaregiver',obj)
  
};
</script>

<style scoped lang="scss">
.addcaregiver {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  overflow: hidden;
  .step {
    margin-top: 45px;
    width: 100%;
    height: 90px;
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 999;
    display: flex;
    justify-content: space-around;
    background-color: rgb(242, 242, 239);
    align-items: center;
    .step-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
  .content {
    background-color: white;
    margin-top: 135px;
    .form {
      width: 100%;
      .prompt {
        padding: 15px;
        line-height: 40px;
      }
    }
  }
  .content1 {
    background-color: white;
    margin-top: 135px;

    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    width: 90%;
    margin-left: 5%;
    color: rgb(0, 194, 226);
    border-radius: 10px;
  }
}
</style>